<template>
  <el-container style="height: 100%;">
    <!-- 左侧菜单  -->
    <el-aside width="250px" class="sidebar-aside">
      <el-menu ref="menuRef" :default-active="defaultActive" active-text-color="black" background-color="#63a6e9"
        class="el-menu-vertical-demo" text-color="#fff" @open="handleOpen" @close="handleClose" @select="handleSelect">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="1-1"><el-icon>
              <UserFilled />
            </el-icon>用户列表</el-menu-item>
          <el-menu-item index="1-2"><el-icon>
              <UserFilled />
            </el-icon>添加用户</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>图书管理</span>
          </template>
          <el-menu-item index="2-1"><el-icon>
              <Collection />
            </el-icon>图书列表</el-menu-item>
          <el-menu-item index="2-2"><el-icon>
              <Collection />
            </el-icon>添加图书</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="3-1"><el-icon>
              <ShoppingCart />
            </el-icon>订单列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>分类管理</span>
          </template>
          <el-menu-item index="4-1"><el-icon>
              <Files />
            </el-icon>分类列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-main style="margin-left: 250px; height: 100%; width: 120vw;">
      <el-card class="content-card" :header="cardTitle">
        <router-view />
      </el-card>
    </el-main>

  </el-container>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { computed, ref, onMounted } from 'vue'
const router = useRouter()//获取路由实例
const route = useRoute()
const menuRef = ref()
const defaultActive = ref('1-1') // 默认激活用户列表

onMounted(() => {
  // 自动展开 index 为 "1" 的菜单（用户管理）
  if (menuRef.value) {
    menuRef.value.open('1')
  }
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 处理导航栏选项函数
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  if (key === '1-1') {
    router.push('/admin/userList')
  } else if (key === '1-2') {
    router.push('/admin/userAdd')
  } else if (key === '2-1') {
    router.push('/admin/bookList')
  } else if (key === '2-2') {
    router.push('/admin/bookAdd')
  } else if (key === '3-1') {
    router.push('/admin/orderList')
  } else if (key === '4-1') {
    router.push('/admin/category')
  }
}

const titleMap = {
  '/userList': '用户列表',
  '/userAdd': '添加用户',
  '/bookList': '图书列表',
  '/bookAdd': '添加图书',
  '/orderList': '订单列表',
  '/category': '分类列表'
}

const cardTitle = computed(() => {
  return titleMap[route.path]
})

</script>
<style scoped>
.el-menu-vertical-demo {
  height: 120vh;
  background-color: #63a6e9;

}

.sidebar-aside {
  width: 250px;
  position: absolute;
  top: 67px;
  left: 0;
  background-color: #63a6e9;
}

.content-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 100%;
  overflow-y: auto;
}
</style>
